<template>
	<view class="list-page home-page" :class="[loading ? 'u-skeleton':'', platform !== 'browser' ? 'weixin-page':'']">
		<!--骨架屏-->
		<u-skeleton :loading="loading" :animation="true" border-radius="20" el-color="#eee" bg-color="#fff"></u-skeleton>
		<view class="skeleton" v-if="loading">
			<view class="banner u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
			<view class="u-skeleton-fillet"></view>
		</view>
		<!-- 这里，内容开始 -->
		<view class="content" v-if="!loading">
			<view class="banner">
				<image src="@/static/image/home-banner.png" mode=""></image>
			</view>
			<view class="list-container">
				<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				<button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo">获取个人信息</button> -->
				<template v-if="totalRow">
					<item v-for="(item, index) of data" :key="index" :data="item" />
					<u-loadmore v-if="isLoadAll" status="nomore" :load-text="{nomore: '没有更多了'}" />
				</template>
				<empty v-else />
			</view>
			<tab-bar></tab-bar>
		</view>
		<!-- 领取，弹框 -->
		<confirm :callback="getPageData">
			<template v-slot:title>领取任务</template>
			<template v-slot:content="{ config }">
				<text>确认领取NO.{{config.taskId || '--'}}任务？</text>
				<text>领稿后请前往网页版做任务</text>
			</template>
		</confirm>
	</view>
</template>
<script>
	import { homeTask } from '@/api/task'
	import item from './components/item'
	import confirm from './components/confirm'
	export default {
		components: {
			item,
			confirm
		},
		data (){
			return {
				loading: true,   // 是否显示骨架屏组件
				limit: 15,
				page: 1,
				isLoaded: true,   // 是否处于加载状态
				isLoadAll: false, // 是否最后一页
				data: [],         // 数据list
				totalRow: 1       // 总条数，默认1条数据，主要用于加载empty
			}
		},
		methods: {
			getPhoneNumber (e) {
				console.log(e)
			},
			getUserInfo (e){
				console.log(e)
			},
			// 获取列表数据
			getPageData (params = {}){
				!this.loading && uni.showLoading({
					title: '加载中...'
				});
				this.isLoaded = false;
				homeTask({
					limit: this.limit || 15,
					page: this.page || 1,
					...params
				}).then(res => {
					let { data: { list, page, totalPage, totalRow } } = res;
					if(res.success){
						if(params.type === 'reset'){
							this.data = []
						}
						this.isLoadAll = (page === totalPage || totalPage === 0) // 判断最后一页
						this.totalRow = totalRow;
						this.data = Object.freeze(this.data.concat(list))
					}
				}).catch(() => {
					this.page -= 1;
				}).finally(() => {
					this.isLoaded = true;
					uni.hideLoading();
					if(this.loading){
						setTimeout(() => {
							this.loading = false
						}, 500)
					}
				})
			},
			// 重置页面数据
			resetPageData (){
				this.page = 1;
				this.isLoadAll = false;
				this.totalRow = 1;
				this.getPageData({
					type: 'reset'
				})
			},
		},
		onLoad (){
			this.getPageData()
		},
		onUnload (){
			this.$eventBus.$off('confirm')
		},
		onPullDownRefresh (){
			// 下拉刷新数据，重置数据
			// 加载中，不再请求
			if(!this.isLoaded){
				return false
			}
			this.resetPageData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom (){
			// 处于加载状态/最后一页时，不触发再次请求
			if(!this.isLoaded || this.isLoadAll) {
				return false
			}
			this.page += 1;
			this.getPageData({
				page: this.page
			})
		}
	}
</script>
